<template>
	<div class="box">
		<div>
			<div>
				<el-card class="card-01">
					<div class="zhpj">
						<span class="zhpj-span">综合评价</span>
					</div>
					<div class="echarts-01">
						<div class="lh-css" v-show="state.shu1 == '1'">舒适</div>
						<div class="lh-css" v-show="state.shu1 == '2'">良好</div>
						<div class="lh-css" v-show="state.shu1 == '3'">糟糕</div>
						<div class="wdsd-css">
							<div>
								<div class="dushu-01">
									<p class="wendu">温度</p>
									<p class="dushu">
										{{ state.wen1 }}<span class="spancdu">℃</span>
									</p>
									<p class="fangwei">（18~20）</p>
								</div>
								<div>
									<p class="wendu">二氧化碳</p>
									<p class="dushu">
										{{ state.er1 }}<span class="spancdu">ppm</span>
									</p>
									<p class="fangwei">（≤1,000）</p>
								</div>
							</div>

							<div>
								<div class="dushu-01">
									<p class="wendu">湿度</p>
									<p class="dushu">
										{{ state.shi1 }}<span class="spancdu">%</span>
									</p>
									<p class="fangwei">（30~60）</p>
								</div>
								<div>
									<p class="wendu">PM2.5</p>
									<p class="dushu">
										{{ state.pm1 }}<span class="spancdu">µg/m³</span>
									</p>
									<p class="fangwei">（≤1,000）</p>
								</div>
							</div>
						</div>
					</div>
					<div class="echats-main">
						<div id="main" style="width: 500px; height: 200px"></div>
						<div class="title-echrts">总体趋势</div>
						<div class="select-css">
							<el-select placeholder="CO₂">
								<el-option label="Zone one" value="shanghai" />
								<el-option label="Zone two" value="beijing" />
							</el-select>
						</div>

						<div class="selectRiqi">
							<el-date-picker v-model="datetime" type="date" placeholder="请选择日期" />
						</div>
					</div>
				</el-card>
			</div>

			<div>
				<div>
					<el-card class="card-02">
						<div class="zhpj">
							<span class="zhpj-span">典型点位信息</span>
						</div>

						<!-- 办公大堂 -->
						<div class="bangong">办公大堂</div>
						<div class="echarts-01">
							<div class="lh-css" v-show="state.shu2 == '1'">舒适</div>
							<div class="lh-css" v-show="state.shu2 == '2'">良好</div>
							<div class="lh-css" v-show="state.shu2 == '3'">糟糕</div>
							<div class="wdsd-css">
								<div>
									<div class="dushu-01">
										<p class="wendu">温度</p>
										<p class="dushu">
											{{ state.wen2 }}<span class="spancdu">℃</span>
										</p>
										<p class="fangwei">（18~20）</p>
									</div>
									<div>
										<p class="wendu">二氧化碳</p>
										<p class="dushu">
											{{ state.er2 }}<span class="spancdu">ppm</span>
										</p>
										<p class="fangwei">（≤1,000）</p>
									</div>
								</div>

								<div>
									<div class="dushu-01">
										<p class="wendu">湿度</p>
										<p class="dushu">
											{{ state.shi2 }}<span class="spancdu">%</span>
										</p>
										<p class="fangwei">（30~60）</p>
									</div>
									<div>
										<p class="wendu">PM2.5</p>
										<p class="dushu">
											{{ state.pm2 }}<span class="spancdu">µg/m³</span>
										</p>
										<p class="fangwei">（≤1,000）</p>
									</div>
								</div>
							</div>
						</div>
						<div class="echats-main">
							<div id="main2" style="width: 500px; height: 200px"></div>
							<div class="title-echrts">趋势</div>
							<div class="select-css">
								<el-select placeholder="PM2.5">
									<el-option label="Zone one" value="shanghai" />
									<el-option label="Zone two" value="beijing" />
								</el-select>
							</div>

							<div class="selectRiqi">
								<el-date-picker v-model="datetime" type="date" placeholder="请选择日期" />
							</div>
							<div class="xuxian"></div>
						</div>

						<!-- 办公区域 -->
						<div>
							<div class="bangong1">办公区域</div>
							<div class="echarts-02">
								<div class="lh-css" v-show="state.shu2 == '1'">舒适</div>
								<div class="lh-css" v-show="state.shu2 == '2'">良好</div>
								<div class="lh-css" v-show="state.shu2 == '3'">糟糕</div>
								<div class="wdsd-css">
									<div>
										<div class="dushu-01">
											<p class="wendu">温度</p>
											<p class="dushu">
												{{ state.wen3 }}<span class="spancdu">℃</span>
											</p>
											<p class="fangwei">（18~20）</p>
										</div>
										<div>
											<p class="wendu">二氧化碳</p>
											<p class="dushu">
												{{ state.er3 }}<span class="spancdu">ppm</span>
											</p>
											<p class="fangwei">（≤1,000）</p>
										</div>
									</div>

									<div>
										<div class="dushu-01">
											<p class="wendu">湿度</p>
											<p class="dushu">
												{{ state.shi3 }}<span class="spancdu">%</span>
											</p>
											<p class="fangwei">（30~60）</p>
										</div>
										<div>
											<p class="wendu">PM2.5</p>
											<p class="dushu">
												{{ state.pm3 }}<span class="spancdu">µg/m³</span>
											</p>
											<p class="fangwei">（≤1,000）</p>
										</div>
									</div>
								</div>
							</div>
							<div class="echats-main">
								<div id="main3" style="width: 500px; height: 200px"></div>
								<div class="title-echrts">趋势</div>
								<div class="select-css">
									<el-select placeholder="温度">
										<el-option label="Zone one" value="shanghai" />
										<el-option label="Zone two" value="beijing" />
									</el-select>
								</div>

								<div class="selectRiqi">
									<el-date-picker v-model="datetime" type="date" placeholder="请选择日期" />
								</div>
								<div class="xuxian"></div>
							</div>
						</div>

						<!-- 商业区域 -->
						<div>
							<div class="bangong1">商业区域</div>
							<div class="echarts-02">
								<div class="lh-css" v-show="state.shu4 == '1'">舒适</div>
								<div class="lh-css" v-show="state.shu4 == '2'">良好</div>
								<div class="lh-css" v-show="state.shu4 == '3'">糟糕</div>
								<div class="wdsd-css">
									<div>
										<div class="dushu-01">
											<p class="wendu">温度</p>
											<p class="dushu">
												{{ state.wen4 }}<span class="spancdu">℃</span>
											</p>
											<p class="fangwei">（18~20）</p>
										</div>
										<div>
											<p class="wendu">二氧化碳</p>
											<p class="dushu">
												{{ state.er4 }}<span class="spancdu">ppm</span>
											</p>
											<p class="fangwei">（≤1,000）</p>
										</div>
									</div>

									<div>
										<div class="dushu-01">
											<p class="wendu">湿度</p>
											<p class="dushu">
												{{ state.shi4 }}<span class="spancdu">%</span>
											</p>
											<p class="fangwei">（30~60）</p>
										</div>
										<div>
											<p class="wendu">PM2.5</p>
											<p class="dushu">
												{{ state.pm4 }}<span class="spancdu">µg/m³</span>
											</p>
											<p class="fangwei">（≤1,000）</p>
										</div>
									</div>
								</div>
							</div>
							<div class="echats-main">
								<div id="main4" style="width: 500px; height: 200px"></div>
								<div class="title-echrts">趋势</div>
								<div class="select-css">
									<el-select placeholder="温度">
										<el-option label="Zone one" value="shanghai" />
										<el-option label="Zone two" value="beijing" />
									</el-select>
								</div>

								<div class="selectRiqi">
									<el-date-picker v-model="datetime" type="date" placeholder="请选择日期" />
								</div>
								<div class="xuxian"></div>
							</div>
						</div>
					</el-card>
				</div>
			</div>
		</div>

		<div>
			<el-card class="card-03">
				<div class="zhpj">
					<span class="zhpj-span">防疫模式</span>
				</div>

				<div class="switch-css">
					<div>
						<span>商场区域</span>
						<el-switch v-model="value1" class="mb-2" />
					</div>
					<div>
						<span>办公大厅</span>
						<el-switch v-model="value2" class="mb-2" />
					</div>

					<div>
						<span>办公区域（走道？典型办公室？）</span>
						<el-switch v-model="value3" class="mb-2" />
					</div>
				</div>
			</el-card>

			<el-card class="card-04">
				<div class="zhpj">
					<span class="zhpj-span">区域舒适性</span>

					<div class="anniu">
					<div :class="indexValue == 0 ? 'bccolorDiv' : 'Div'" @click="qiehuan(0)">
						<span> 温度场</span>
					</div>
					<div :class="indexValue == 1 ? 'bccolorDiv' : 'Div'" @click="qiehuan(1)">
						<span> 湿度场</span>
					</div>
					<div :class="indexValue == 2 ? 'bccolorDiv' : 'Div'" @click="qiehuan(2)">
						<span> CO₂场</span>
					</div>
					<div :class="indexValue == 3 ? 'bccolorDiv' : 'Div'" @click="qiehuan(3)">
						<span>PM场</span>
					</div>
				</div>
				</div>

				
				<div class="block">
					<el-date-picker v-model="datetimes" type="date" placeholder="请选择时间" />
				</div>
				<div v-show="indexValue == 0">
					<div id="main5" style="width: 800px; height: 882px"></div>
				</div>

				<div v-show="indexValue == 1">
					<div id="main7" style="width: 800px; height: 882px"></div>
				</div>

				<div v-show="indexValue == 2">
					<div id="main8" style="width: 800px; height: 882px"></div>
				</div>

				<div v-show="indexValue == 3">
					<div id="main9" style="width: 800px; height: 882px"></div>
				</div>

			</el-card>

			<el-card class="card-05">
				<div class="zhpj">
					<span class="zhpj-span">相关性分析</span>
					<div class="select-css">
						<div class="select01">
							<el-select placeholder="温度">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</div>

						<div class="select02">
							<el-select placeholder="CO₂">
								<el-option label="Zone one" value="shanghai" />
								<el-option label="Zone two" value="beijing" />
							</el-select>
						</div>

						<div class="block_time">
							<el-date-picker v-model="start_end_time" type="daterange" range-separator="至"
								start-placeholder="开始时间" end-placeholder="结束时间" />
						</div>
					</div>
				</div>
				<div class="main6">
					<div class="dwxshi">单位显示</div>
					<div id="main6" style="width: 800px; height: 265px"></div>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import packagingEchats from "@/components/packagingEchats/index";
import { Analysis,Scalar } from "@/api/model/echarts"
import * as echarts from "echarts";

const value1 = ref(true);
const value2 = ref(true);
const value3 = ref(true);
const indexValue = ref(0);
const datetimes = ref("");
const start_end_time = ref("");
const qiehuan = (i) => {
	indexValue.value = i;
};
const options = reactive([
	{
		value: '温度',
		label: '温度',
	},
	{
		value: '湿度',
		label: '湿度',
	},
	//   {
	//     value: 'co2',
	//     label: 'co2',
	//   },
	//   {
	//     value: 'PM2.5',
	//     label: 'pm2.5',
	//   },

])
const state = reactive({
	f: {
		indicatorName: "相关性分析",
		firstType: "数据分析",
		secondType: "",
		thirdType: "",
		dataType: "hour",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		projectId: '1'
	},

	// 综合评价
	shu1: "",
	wen1: "",
	er1: "",
	pm1: "",
	shi1: "",

	// 办公大堂
	shu2: "",
	wen2: "",
	er2: "",
	pm2: "",
	shi2: "",

	// 办公区域
	shu3: "",
	wen3: "",
	er3: "",
	pm3: "",
	shi3: "",
	// 办公区域
	shu4: "",
	wen4: "",
	er4: "",
	pm4: "",
	shi4: "",
})



onMounted(() => {
	getZongHe()
	
	packagingEchats();
	getBanGong()
	getQuYu()
	getShangYe()
	F()
});
async function F() {
	console.log("F触发");
	let res = await Analysis(state.f)
	var byear = []
	var shuju = []
	var num = []
	var num2 = []
	console.log(res, '相关性分析');
	res.data.commonHourlyDataList.forEach((item) => {
		byear.push(`${item.day.substring(0, 10)}`)
		if (item.hour % 2 == 0) {
			shuju.push(item.hour)
		}
		num.push(item.number1)
		num2.push(item.number2)


	})
	console.log(byear);
	console.log(shuju, 'shujulist');
	let list = [...new Set(shuju)]
	console.log(list, '去重后的时间');

	let myChart6 = echarts.init(document.getElementById("main6"));
	myChart6.setOption({
		title: {
			text: "",
		},
		tooltip: {
			trigger: "axis",
		},
		legend: {
			icon:'rect',
			itemWidth: 20,
				itemHeight: 1,
			data: ["室外", "室内"],
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "1%",
			containLabel: true,
		},

		xAxis: {
			type: "category",
			boundaryGap: false,
			data: list,
			min: 1,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				name: "室内",
				type: "line",
				stack: "Total",
				lineStyle: { color: "#479bd0" },
				itemStyle: { color: "#479bd0" },
				data: num,
			},
			{
				name: "室外",
				type: "line",
				stack: "Total",

				lineStyle: { color: "#325bd0" },
				itemStyle: { color: "#325bd0" },
				data: num2,
			},
		],

	});
}
const getZongHe = async () => {
	console.log("getZongHe触发");
	let obj = {
		dataType: "hour",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		firstType: "数据分析",
		indicatorName: "总体趋势",
		thirdType: "co2",
	};
	let obj2 = {
		dataType: "scalar",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		firstType: "",
		indicatorName: "国内标准",
		thirdType: "",
	};
	let obj3 = {
		dataType: "scalar",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		firstType: "",
		indicatorName: "世卫标准",
		thirdType: "",
	};
	let obj4 = {
		dataType: "scalar",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		firstType: "",
		indicatorName: "综合评价",
		thirdType: "",
	};
	let data = []	// 时间
	let data1 = []	// type1数据
	let data2 = []	// type2数据
	let data3 = []	// type3数据
	// 国内标准
	let internal = []
	// 世卫标准
	let world = []
	
	let res = await Analysis(obj)
	let res2 = await Scalar(obj2)
	let res3 = await Scalar(obj3)
	let res4 = await Scalar(obj4)
	
	if (res.code == 200) {
		res.data.commonHourlyDataList.forEach((item) => {
			if (item.type === "type1") {
				data1.push(item.number1);
			} else if (item.type === "type2") {
				data2.push(item.number1);
			} else if (item.type === "type3") {
				data3.push(item.number1)
			}
			data.push(item.hour);
		});
	}
	if (res2.code == 200) {
		internal = res2.data.scalarList
	}
	if (res3.code == 200) {
		world = res3.data.scalarList
	}
	if (res4.code == 200) {
		console.log(res4,'res444444444444444444444444444444');
		state.shu1 = res4.data.scalarList[0].data
		state.wen1 = res4.data.scalarList[1].data
		// state.er1 = res4.data.scalarList[7].data
		// state.pm1 = res4.data.scalarList[9].data
		// state.shi1 = res4.data.scalarList[4].data
	}
	// console.log(ds, "data")	
	let myChart = echarts.init(document.getElementById("main"));
	myChart.setOption({
		title: {
			text: "",
		},
		tooltip: {
			trigger: "axis",
		},
		legend: {
			icon:'rect',
			itemWidth: 20,
				itemHeight: 1,
			data: ["室外", "室内"],
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "1%",
			containLabel: true,
		},

		xAxis: {
			type: "category",
			boundaryGap: false,
			data: [
				"00:00",
				"02:00",
				"04:00",
				"06:00",
				"08:00",
				"10:00",
				"12:00",
				"14:00",
				"16:00",
				"18:00",
				"20:00",
				"22:00",
				"24:00",
			],
			min: 1,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				name: "室内",
				type: "line",
				stack: "Total",
				data: data1,
				//设置基准线
				markLine: {
					symbol: "none", //去掉箭头
					lineStyle: {
						type: "solid",
						color: "#e76f70", // 这儿设置安全基线颜色
						width: 3,
					},
					data: [
						{
							yAxis: internal[0].data,
							lineStyle: { color: "#23bb68" },
							label: {
								color: "#7E7E7E",
								formatter: "国内标准",
								position: "insideEndTop",
								fontSize: 12,
							},
						},
						{
							yAxis: world[0].data,
							lineStyle: { color: "#f3f3f3" },
							label: {
								color: "#7E7E7E",
								formatter: "世卫标准",
								position: "insideEndTop",
								fontSize: 12,
							},
						},
					],
					label: {
						show: true,
					},
				},
			},
			{
				name: "室外",
				type: "line",
				stack: "Total",
				data: data2,
			},
		],
	});

}


const getBanGong = async () => {
	console.log("getBanGong触发");
	let obj = {
		dataType: "hour",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		firstType: "数据分析",
		indicatorName: "办公大堂-趋势",
		thirdType: "co2",
	};

	let obj4 = {
		dataType: "scalar",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		firstType: "",
		indicatorName: "办公大堂",
		thirdType: "",
	};
	let data = []	// 时间
	let data1 = []	// type1数据
	let data2 = []	// type2数据
	let data3 = []	// type3数据
	let res = await Analysis(obj)
	let res4 = await Scalar(obj4)
	console.log(res4, "asdasdasdasdadsadadas")
	if (res.code == 200) {
		res.data.commonHourlyDataList.forEach((item) => {
			if (item.type == "type1") {
				data1.push(item.number1);
			} else if (item.type == "type2") {
				data2.push(item.number1);
			} else if (item.type == "type3") {
				data3.push(item.number1)
			}
			data.push(item.hour);
		});
	}
	if (res4.code == 200) {
		console.log(res4,'res444444444444444444');
		state.shu2 = res4.data.scalarList[1].data
		// state.wen2 = res4.data.scalarList[3].data
		// state.er2 = res4.data.scalarList[2].data
		// state.pm2 = res4.data.scalarList[4].data
		state.shi2 = res4.data.scalarList[0].data
	}
	let myChart2 = echarts.init(document.getElementById("main2"));
	myChart2.setOption({
		title: {
			text: "",
		},
		tooltip: {
			trigger: "axis",
		},

		legend: {
			icon:'rect',
			itemWidth: 20,
				itemHeight: 1,
			data: ["室外", "室内"],
			
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "1%",
			containLabel: true,
		},

		xAxis: {
			type: "category",
			boundaryGap: false,
			data: [
				"00:00",
				"02:00",
				"04:00",
				"06:00",
				"08:00",
				"10:00",
				"12:00",
				"14:00",
				"16:00",
				"18:00",
				"20:00",
				"22:00",
				"24:00",
			],
			min: 1,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				name: "室内",
				type: "line",
				stack: "Total",
				lineStyle: { color: "#479bd0" },
				itemStyle: { color: "#479bd0" },
				data: data1,
				//设置基准线
				markLine: {
					symbol: "none", //去掉箭头
					lineStyle: {
						type: "solid",
						color: "#e76f70", // 这儿设置安全基线颜色
						width: 3,
					},
					data: [
						{
							yAxis: 80,
							lineStyle: { color: "#23bb68" },
							label: {
								color: "#7E7E7E",
								formatter: "美国标准",
								position: "insideEndTop",
								fontSize: 12,
							},
						},

					],
					label: {
						show: true,
					},
				},
			},

			{
				name: "室外",
				type: "line",
				stack: "Total",
				data: data2,
			},
		],
	});
}

const getQuYu = async () => {
	console.log("getQuYu触发");
	let obj = {
		dataType: "hour",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		firstType: "数据分析",
		indicatorName: "办公区域-趋势",
		thirdType: "co2",
	};

	let obj4 = {
		dataType: "scalar",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		firstType: "",
		indicatorName: "办公区域",
		thirdType: "",
	};
	let data = []	// 时间
	let data1 = []	// type1数据
	let data2 = []	// type2数据
	let data3 = []	// type3数据
	let res = await Analysis(obj)
	let res4 = await Scalar(obj4)
	console.log(res, "11111111")
	console.log(res4, "22222222222")
	if (res.code == 200) {
		res.data.commonHourlyDataList.forEach((item) => {
			if (item.type == "type1") {
				data1.push(item.number1);
			} else if (item.type == "type2") {
				data2.push(item.number1);
			} else if (item.type == "type3") {
				data3.push(item.number1)
			}
			data.push(item.hour);
		});
	}
	if (res4.code == 200) {
		state.shu3 = res4.data.scalarList[0].data
		state.wen3 = res4.data.scalarList[1].data
		// state.er3 = res4.data.scalarList[3].data
		// state.pm3 = res4.data.scalarList[4].data
		// state.shi3 = res4.data.scalarList[2].data
	}
	let myChart3 = echarts.init(document.getElementById("main3"));
	myChart3.setOption({
		title: {
			text: "",
		},
		tooltip: {
			trigger: "axis",
		},
		legend: {
			icon:'rect',
			
			itemWidth: 20,
				itemHeight: 1,
			data: ["室外", "室内"],
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "1%",
			containLabel: true,
		},

		xAxis: {
			type: "category",

			boundaryGap: false,
			data: [
				"00:00",
				"02:00",
				"04:00",
				"06:00",
				"08:00",
				"10:00",
				"12:00",
				"14:00",
				"16:00",
				"18:00",
				"20:00",
				"22:00",
				"24:00",
			],
			min: 1,
		},
		yAxis: {

			type: "value",
		},
		series: [
			{
				name: "室内",
				type: "line",
				stack: "Total",
				lineStyle: { color: "#479bd0" },
				itemStyle: { color: "#479bd0" },
				data: data1,
			},
			{
				name: "室外",
				type: "line",
				stack: "Total",

				data: data2,
				itemStyle: {
					opacity: 0
				}
			},
		],
	});
}

const getShangYe = async () => {
	console.log("getShangYe触发");
	let obj = {
		dataType: "hour",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		firstType: "数据分析",
		indicatorName: "商业区域-趋势",
		thirdType: "co2",
	};

	let obj4 = {
		dataType: "scalar",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		firstType: "",
		indicatorName: "办公区域",
		thirdType: "",
	};
	let data = []	// 时间
	let data1 = []	// type1数据
	let data2 = []	// type2数据
	let data3 = []	// type3数据
	let res = await Analysis(obj)
	let res4 = await Scalar(obj4)
	console.log(res, "11111111res")
	console.log(res4, "22222222222res4")
	if (res.code == 200) {
		res.data.commonHourlyDataList.forEach((item) => {
			if (item.type == "type1") {
				data1.push(item.number1);
			} else if (item.type == "type2") {
				data2.push(item.number1);
			} else if (item.type == "type3") {
				data3.push(item.number1)
			}
			data.push(item.hour);
		});
	}
	if (res4.code == 200) { 
		state.shu4 = res4.data.scalarList[0].data
		state.wen4 = res4.data.scalarList[1].data
		// state.er4 = res4.data.scalarList[3].data
		// state.pm4 = res4.data.scalarList[4].data
		// state.shi4 = res4.data.scalarList[2].data
	}
	let myChart4 = echarts.init(document.getElementById("main4"));
	myChart4.setOption({
		title: {
			text: "",
		},
		tooltip: {
			trigger: "axis",
		},
		legend: {
			
			data: ["室外1","室内"],
			icon:'rect',
			itemWidth: 20,
				itemHeight: 1,
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "1%",
			containLabel: true,
		},

		xAxis: {
			type: "category",
			boundaryGap: false,
			data: [
				"00:00",
				"02:00",
				"04:00",
				"06:00",
				"08:00",
				"10:00",
				"12:00",
				"14:00",
				"16:00",
				"18:00",
				"20:00",
				"22:00",
				"24:00",
			],
			min: 1,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				name: "室内",
				type: "line",
				stack: "Total",
				lineStyle: { color: "#479bd0" },
				itemStyle: { color: "#479bd0" },
				data: data1,
			},
			{
				name: "室外",
				type: "line",
				stack: "Total",

				data: data2,
				itemStyle: {
					opacity: 0
				}
			},
		],
	});
}


</script>

<style lang="less" scoped>
.box {
	display: flex;

	.card-01 {
		margin-left: 50px;
		width: 904px;
		height: 302px;
		position: relative;

		.zhpj {
			position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 890px;

			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 700;
				color: #4d62a5;
				font-size: 20px;
			}
		}

		.echarts-01 {
			margin-top: 70px;
			margin-left: 10px;
			width: 77px;
			height: 59px;
			border: 1px solid #7f7f7f;
			border-radius: 8px;
			display: flex;
			position: relative;

			.lh-css {
				margin: auto;
				font-family: SourceHanSansSC-regular;
				font-weight: 800;
				color: #fecc30;
				font-size: 24px;
			}

			.wdsd-css {
				display: flex;
				position: absolute;
				margin-left: 100px;

				.dushu-01 {
					margin-bottom: 32px;
				}

				.wendu {
					font-family: SourceHanSansSC-regular;
					color: #7e7e7e;
					font-size: 14px;
					margin-bottom: 4px;
				}

				.dushu {
					font-family: SourceHanSansSC-regular;
					font-weight: normal;
					color: #277bcb;
					font-size: 22px;
					margin-bottom: 4px;

					.spancdu {
						color: #7e7e7e;
						font-size: 12px;
					}
				}

				.fangwei {
					color: #7e7e7e;
					font-size: 12px;
					margin-left: -9px;
				}

				.eyht {
					font-family: SourceHanSansSC-regular;
					color: #7e7e7e;
					font-size: 14px;
					margin-bottom: 4px;
				}
			}
		}

		#main {
			margin-left: 280px;
			bottom: 70px;
		}

		.select-css {
			position: absolute;
			width: 100px;
			bottom: 190px;
			margin-left: 605px;
		}

		.selectRiqi {
			position: absolute;
			bottom: 190px;
			margin-left: 725px;
			width: 144px;

			:deep(.el-input__inner) {
				width: 140px;
			}
		}

		.title-echrts {
			position: absolute;
			bottom: 203px;
			margin-left: 290px;
			font-size: 14px;
			color: #7f7f7f;
		}

		.echats-main {
			display: flex;
		}
	}

	.card-02 {
		margin-left: 50px;
		width: 904px;
		height: 980px;
		margin-top: 24px;

		.zhpj {
			// position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 904px;

			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 700;
				color: #4d62a5;
				font-size: 20px;
			}
		}

		.bangong {
			position: absolute;
			margin-top: 15px;
			margin-left: 16px;
			font-size: 16px;
			color: #7f7f7f;
		}

		.bangong1 {
			margin-top: 20px;
			padding-bottom: 20px;
			margin-left: 16px;
			font-size: 16px;
			color: #7f7f7f;
		}

		.echarts-01 {
			margin-top: 50px;
			margin-left: 10px;
			width: 77px;
			height: 59px;
			border: 1px solid #7f7f7f;
			border-radius: 8px;
			display: flex;
			position: relative;

			.lh-css {
				margin: auto;
				font-family: SourceHanSansSC-regular;
				font-weight: 800;
				color: #fecc30;
				font-size: 24px;
			}

			.wdsd-css {
				display: flex;
				position: absolute;
				margin-left: 100px;

				.dushu-01 {
					margin-bottom: 32px;
				}

				.wendu {
					font-family: SourceHanSansSC-regular;
					color: #7e7e7e;
					font-size: 14px;
					margin-bottom: 4px;
				}

				.dushu {
					font-family: SourceHanSansSC-regular;
					font-weight: normal;
					color: #277bcb;
					font-size: 22px;
					margin-bottom: 4px;

					.spancdu {
						color: #7e7e7e;
						font-size: 12px;
					}
				}

				.fangwei {
					color: #7e7e7e;
					font-size: 12px;
					margin-left: -9px;
				}

				.eyht {
					font-family: SourceHanSansSC-regular;
					color: #7e7e7e;
					font-size: 14px;
					margin-bottom: 4px;
				}
			}
		}

		.echarts-02 {
			margin-left: 10px;
			width: 77px;
			height: 59px;
			border: 1px solid #7f7f7f;
			border-radius: 8px;
			display: flex;
			position: relative;

			.lh-css {
				margin: auto;
				font-family: SourceHanSansSC-regular;
				font-weight: 800;
				color: #fecc30;
				font-size: 24px;
			}

			.wdsd-css {
				display: flex;
				position: absolute;
				margin-left: 100px;

				.dushu-01 {
					margin-bottom: 32px;
				}

				.wendu {
					font-family: SourceHanSansSC-regular;
					color: #7e7e7e;
					font-size: 14px;
					margin-bottom: 4px;
				}

				.dushu {
					font-family: SourceHanSansSC-regular;
					font-weight: normal;
					color: #277bcb;
					font-size: 22px;
					margin-bottom: 4px;

					.spancdu {
						color: #7e7e7e;
						font-size: 12px;
					}
				}

				.fangwei {
					color: #7e7e7e;
					font-size: 12px;
					margin-left: -9px;
				}

				.eyht {
					font-family: SourceHanSansSC-regular;
					color: #7e7e7e;
					font-size: 14px;
					margin-bottom: 4px;
				}
			}
		}

		#main2 {
			margin-left: 280px;
			bottom: 70px;
		}

		#main3 {
			margin-left: 280px;
			bottom: 70px;
		}

		#main4 {
			margin-left: 280px;
			bottom: 70px;
		}

		.select-css {
			display: flex;
			position: absolute;
			width: 100px;
			bottom: 240px;
			margin-left: 605px;
		}

		.selectRiqi {
			position: absolute;
			bottom: 240px;
			margin-left: 725px;
			width: 144px;

			:deep(.el-input__inner) {
				width: 140px;
			}
		}

		.title-echrts {
			position: absolute;
			bottom: 250px;
			margin-left: 290px;
			font-size: 14px;
			color: #7f7f7f;
		}

		.echats-main {
			display: flex;
			position: relative;
			border-bottom: 1px dotted #dbe0ed;

			.xuxian {
				border-bottom: 1px dotted #dbe0ed;
			}
		}
	}

	.card-03 {
		width: 100%;
		height: 145px;
		margin-left: 10px;

		.zhpj {
			// position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 890px;

			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 600;
				color: #4d62a5;
				font-size: 20px;
			}
		}

		.switch-css {
			display: flex;
			margin-top: 15px;
			justify-content: space-between;
			width: 80%;
			:deep(.el-switch.is-checked .el-switch__core) {
				border-color: #8faadc;
				background-color: #8faadc;
			}

			span {
				margin-right: 20px;
			}
		}
	}

	.card-04 {
		width: 100%;
		margin-left: 10px;
		margin-top: 20px;
		height: 700px;
		display: flex;

		.zhpj {
			display: flex;
			// position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 890px;

			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 700;
				color: #4d62a5;
				font-size: 20px;
			}
		}

		.anniu>div:first-child {
			margin-left: 330px;
		}

		.anniu {
			display: flex;

			.bccolorDiv {
				width: 80px;
				height: 30px;
				background-color: #dbe0ed;
				border-radius: 4px;
				position: relative;
				margin-left: 20px;

				span {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: #4d62a5;
				}
			}

			.Div {
				width: 80px;
				height: 30px;
				background-color: #ebebeb;
				border-radius: 4px;
				position: relative;
				margin-left: 20px;

				span {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}

		.block {
			margin-top: 40px;
			margin-left: 590px;
		}
	}

	.card-05 {
		width: 100%;
		margin-left: 10px;
		margin-top: 20px;
		height: 420px;

		.zhpj {
			display: flex;
			// position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 890px;

			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 700;
				color: #4d62a5;
				font-size: 20px;
			}
		}

		.select-css {
			display: flex;

			.select01 {
				width: 100px;
				margin-left: 130px;
			}

			.select02 {
				width: 100px;
				margin-left: 30px;
			}

			.block_time {
				margin-left: 20px;
			}
		}

		.main6 {
			// .dwxshi {
				// margin-top: 80px;
			// }

			margin-top: 50px;
		}
	}
}
</style>